<template>
	<div>
		<el-row>
			<el-input v-model="input" placeholder="请输入订单号" class='ipt'></el-input>
		</el-row>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="_id" label='ID' width="220">
			</el-table-column>
			<el-table-column prop="no" label='订单编号' width="180">
			</el-table-column>
			<el-table-column prop="price" label="价格" width="100">
			</el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>
			<el-table-column prop="createdAt" label="创建时间"width="180">
				<template scope="scope">
					{{ scope.row.createdAt | dateTo }}
				</template>
			</el-table-column>
			<el-table-column prop="isPayed" label="支付状态"width="100">
				<template scope="scope">
					<el-tag type="info" class='isPayed'>{{ scope.row.isPayed | toAdmin }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" round @click="search(scope.row)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="totalCount"
		@current-change="handleCurrentChange"
		 :current-page="currentPage"
		 class='fen'
		 >
		</el-pagination>
		<el-dialog title="订单详情" :visible.sync="dialogTableVisible" @close='close' class='orderItem'>
			<span>订单ID</span>
			<span>{{ gridData._id }}</span>
			<span>订单编号</span>
			<span>{{ gridData.no }}</span>
			<span>订单价格</span>
			<span>{{ gridData.price }}</span>
			<span>地址</span>
			<span>{{ gridData.address }}</span>
			<span>创建时间</span>
			<span>{{ gridData.createdAt }}</span>
			<span>订单状态</span>
			<span>{{ gridData.isPayed | toAdmin }}</span>
		</el-dialog>
	</div>
</template>

<script>
	import * as api from '../api/Order'
	import {mapState} from 'vuex'
	export default {
		name: 'orderDetail',
		data() {
			return {
				gridData:[],
				tableData: [],
				currentPage:1,
				totalCount:50,
				input:'',
				dialogTableVisible:false,
			}
		},
		methods:{
			...mapState(['token']),
			close(){
				this.input = '';
			},
			// 搜索订单
			search(row){
				api.getOrder(row._id,{
					
				}).then(res=>{
					this.gridData = res.data
					this.dialogTableVisible = true
				})
			},
			handleCurrentChange(currentPage){
				this.currentPage = currentPage;
				api.orders({
					per:6,
					page: currentPage
				}).then(res => {
					this.tableData = res.data.orders
				})
			}
		},
		updated(){
			let isPayed = document.querySelectorAll('.isPayed')
			isPayed.forEach(function(v){
				if(v.innerHTML == '已完成'){
					v.className='isPayed el-tag el-tag--success el-tag--light'
				}else{
					v.className='isPayed el-tag el-tag--info el-tag--light'
				}
			})
		},
		mounted() {
			api.orders({
				per:6,
				page: 1
			}).then(res => {
				this.totalCount = res.data.totalCount
				this.tableData = res.data.orders
			})
			
		},
		watch:{
			input:function(newVal){
				api.orders({
					per:6,
					page: 1,
					no:newVal,
				}).then(res => {
					this.totalCount = res.data.totalCount
					this.tableData = res.data.orders
				})
			}
		},
		filters: {
			toAdmin: function(val) {
				if (val) {
					return '已完成'
				} else {
					return '未支付'
				}
			},
			dateTo:function(val){
				return new Date(val).toLocaleString()
			}
		}
	}
</script>

<style scoped="">
	.ipt{
		width: 300px;
	}
	.orderItem span{
		display: block;
		height: 35px;
		line-height: 35px;
	}
	.fen{
		position: absolute;
		left: 40%;
		bottom: 10px;
	}
</style>
